<!--
  20.1 父向子通信

- 通过 Prop 向子组件传递数据
- 语法:
// 定义组件: 组件属性(定义父组件需要传递过来的属性)
props : {
    // Prop属性名 : {type : "数据类型", required : 是否必须}
    title : {type : String, required : true},
    color : {type : String, required : false}
}

// 使用组件
<组件名称 title="" color=""></组件名称>
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs父子通信</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--    使用组件-->
    <my-div :title="msg" color="red"></my-div>
</div>

<script type="text/javascript">
    // 全局注册组件
    Vue.component("MyDiv", {
        // 渲染模板
        template: `<div @click="add()" :style="'color:' + color">{{title}}</div>`,
        // 组件数据（必须是一个函数）
        data: function () {
            return {}
        },

        // 组件属性(定义符组件需要传递过来的属性)
        props: {
            title: {type: String, required: true},
            color: {type: String, required: false},
        },

        // 方法
        methods: {
            add: function () {
                alert(this.title);
            }
        }
    });
    // 创建vue实例
    var vue = new Vue({
        el : '#app',
        data : {
            msg : '我是一个div，2020年4月21日10:58:40'
        }
    });

</script>
</body>
</html>